<template>
    <div class="upload-view">
        <div v-if="!start" class="lk-upload" @click="openFile">
            <input id="uploadVideo" ref="uploadVideo" accept=".mp4" class="lk-upload-input" type="file" name="file"
                   @change="doUpload">
        </div>
        <div v-else class="lk-upload-spec">
            <el-progress :width="40" type="circle" :percentage="tage"
                         :status="tage===100?'success':'exception'"></el-progress>
        </div>
    </div>
</template>
<script>
    import OSS from "ali-oss";
    import {get_sts_token} from "@/api/upload";

    export default {

        data() {
            return {
                ossToken: null,
                tage: 0,
                videoUrl: "",
                coverPic: "",
                start: false
            };
        },
        methods: {
            delImage(index) {
                this.fileList.splice(index, 1);
            },
            openFile() {
                this.$refs.uploadVideo.click();
                this.initClient();
            },
            doUpload() {
                let ele = document.getElementById("uploadVideo");
                const files = ele.files;
                if (!files) {
                    return;
                }
                let file = files[0];
                if (!file) {
                    return;
                }
                if (file.type !== "video/mp4") {
                    this.$message.error("请上传mp4文件");
                    return;
                }
                if (file.size > 10 * 1024 * 1024) {
                    this.$message.error("请上传小于10M的文件");
                    return;
                }
                let fileName = file.name;
                let tempCheckpoint;
                this.start = true;
                this.client
                    .multipartUpload("video/" + fileName, file, {
                        progress: (p, checkpoint) => {
                            this.tage = Math.round(100 * p);
                            console.log(this.tage);
                            tempCheckpoint = checkpoint;
                        },
                        mime: "video/mp4",
                    })
                    .then(() => {
                        this.$emit(
                            "success",
                            this.ossToken.prefix + "/video/" + fileName
                        );
                    });
            },
            initClient() {
                get_sts_token().then((res) => {
                    this.ossToken = res.data;
                    this.client = new OSS({
                        accessKeyId: res.data.accessKeyId,
                        accessKeySecret: res.data.accessKeySecret,
                        stsToken: res.data.securityToken,
                        bucket: res.data.bucket,
                    });
                });
            },
        },
    };
</script>
<style lang="less" scoped>
    .lk-upload,
    .lk-upload-spec {
        box-sizing: border-box;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 10px;
        width: 80px;
        height: 80px;
        border-radius: 4px;
        border: 1px dashed #d9d9d9;
        position: relative;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .lk-upload::after,
    .lk-upload::before {
        background-color: #8c939d;
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
    }

    .lk-upload::after {
        content: "";
        width: 20px;
        height: 1px;
    }

    .lk-upload::before {
        content: "";
        width: 1px;
        height: 20px;
    }

    .lk-upload:hover {
        border: 1px dashed #409eff;
    }

    .lk-upload-input {
        display: none;
    }

    .upload-view {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .lk-upload-image {
        width: 80px;
        height: 80px;
        border-radius: 4px;
        border: 1px dashed #d9d9d9;
        padding: 5px;
        box-sizing: border-box;
    }

    .lk-upload-image:hover {
        border: 1px dashed #409eff;
    }

    .lk-upload-iamge-container {
        position: relative;
        margin: 5px;
    }

    .del-image {
        color: #ff0000;
        font-size: 18px;
        position: absolute;
        top: -10px;
        right: -8px;
        cursor: pointer;
    }

    .lk-upload-spec-span {
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        color: #555555;
        font-size: 15px;
    }
</style>